<template>
  <div class="app-container">
    <el-row>
      <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>排序规则配置</span>
      </div>
      <el-form :inline="true" :model="firRuleForm" ref="firRuleForm" label-width="100px" class="demo-form-inline">
        <el-form-item label="第一优先级">
          <el-checkbox v-model="firRuleForm.ruleChecked" @change="firRuleChange"></el-checkbox>
        </el-form-item>
        <el-form-item label="排序规则">
          <el-select v-model="firRuleForm.ruleValue" placeholder="请选择" :disabled="!firRuleForm.ruleChecked">
            <el-option
              v-for="item in firRuleList"
              :key="item.code"
              :label="item.fullName"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="secRuleForm" ref="secRuleForm" label-width="100px" class="demo-form-inline">
        <el-form-item label="第二优先级">
          <el-checkbox v-model="secRuleForm.ruleChecked" @change="secRuleChange"></el-checkbox>
        </el-form-item>
        <el-form-item label="排序规则">
          <el-select v-model="secRuleForm.ruleValue" placeholder="请选择" :disabled="!secRuleForm.ruleChecked">
            <el-option
              v-for="item in secRuleList"
              :key="item.code"
              :label="item.fullName"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="颜色阀值">
          <el-input v-model="secRuleForm.minLimit" style="width: 50px;"></el-input>
          <span>——</span>
          <el-input v-model="secRuleForm.maxLimit" style="width: 50px;"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="thrRuleForm" ref="thrRuleForm" label-width="100px" class="demo-form-inline">
        <el-form-item label="第三优先级">
          <el-checkbox v-model="thrRuleForm.ruleChecked" @change="thrRuleChange"></el-checkbox>
        </el-form-item>
        <el-form-item label="排序规则">
          <el-select v-model="thrRuleForm.ruleValue" placeholder="请选择" :disabled="!thrRuleForm.ruleChecked">
            <el-option
              v-for="item in thrRuleList"
              :key="item.code"
              :label="item.fullName"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车型阀值">
          <el-input v-model="thrRuleForm.minLimit" style="width: 50px;"></el-input>
          <span>——</span>
          <el-input v-model="thrRuleForm.maxLimit" style="width: 50px;"></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="fouRuleForm" ref="fouRuleForm" label-width="100px" class="demo-form-inline">
        <el-form-item label="第四优先级">
          <el-checkbox v-model="fouRuleForm.ruleChecked" @change="fouRuleChange"></el-checkbox>
        </el-form-item>
        <el-form-item label="排序规则">
          <el-select v-model="fouRuleForm.ruleValue" placeholder="请选择" :disabled="!fouRuleForm.ruleChecked">
            <el-option
              v-for="item in fouRuleList"
              :key="item.code"
              :label="item.fullName"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    </el-row>
    <el-row style="margin-top:16px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>优先车辆队列配置</span>
        </div>
        <el-form :inline="true" label-width="100px" class="demo-form-inline">
          <el-form-item label="WIN号">
            <el-input v-model="winNum" ref="winNum" placeholder="请输入车辆WIN号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="addWinNum">添加</el-button>
          </el-form-item>
          <el-form-item label="车辆队列">
            <el-input type="textarea" v-model="winNumList" :rows="5"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
    <el-row style="margin-top:16px;">
      <el-button type="primary" @click="saveAll()">保存</el-button>
    </el-row>
    <!-- <el-tree :data="tree" :node-key="'id'" :props="{label: 'fullName'}" @node-click="handleNodeClick"></el-tree> -->
    <el-row style="margin-top:16px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>当前优先车辆队列管理</span>
        </div>
        <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        >
          <el-table-column label="VIN号" prop="a" align="center" width="300px">
            <template slot-scope="scope">
              <span>{{ scope.row.a }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="300px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.b | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Status" class-name="status-col" width="300px">
            <template slot-scope="scope">
              <el-tag :type="scope.row.c | statusTypeFilter">
                {{ scope.row.c | statusFilter }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="Actions" align="center" class-name="small-padding fixed-width">
            <template slot-scope="{row}" v-if="row.c === 0">
              <el-popover
                placement="top"
                width="160"
                v-model="row.visible">
                <p>你确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="row.visible = false;handleDelete(row.id)">确定</el-button>
                </div>
                <el-button slot="reference" size="mini" type="danger">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
  </div>
  
</template>
<style scoped>
  .rule-editor {
    padding: 16px;
  }
</style>
<script>
export default {
  name: 'OrderRule',
  filters: {
    statusTypeFilter(status) {
      const statusMap = {
        0: 'success',
        1: 'info'
      }
      return statusMap[status]
    },
    statusFilter(status) {
      const statusMap = {
        0: '未放行',
        1: '已放行'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      // 排序规则form列表
      ruleList: [
        { code: 1, fullName: '批次优先' },
        { code: 2, fullName: '颜色优先' },
        { code: 3, fullName: '车型优先' },
        { code: 4, fullName: '先进先出' }
      ],
      // 第一优先级form
      firRuleForm: {
        ruleChecked: false,
        ruleVlaue: undefined,
        minLimit: undefined,
        maxLimit: undefined
      },
      firRuleList: [],
      // 第二优先级form
      secRuleForm: {
        ruleChecked: false,
        ruleVlaue: undefined,
        minLimit: undefined,
        maxLimit: undefined
      },
      secRuleList: [],
      // 第三优先级form
      thrRuleForm: {
        ruleChecked: false,
        ruleVlaue: undefined,
        minLimit: undefined,
        maxLimit: undefined
      },
      thrRuleList: [],
      // 第四优先级form
      fouRuleForm: {
        ruleChecked: false,
        ruleVlaue: undefined,
        minLimit: undefined,
        maxLimit: undefined
      },
      fouRuleList: [],
      // 优先车辆队列
      winNum: '',
      winNumList: '',
      // test
      treedata: [
        { id: 1, parentId: 0, code: '1', fullName: '根节点', enabled: true, sortCode: 1 },
        { id: 11, parentId: 1, code: '11', fullName: '节点11', enabled: true, sortCode: 11 },
        { id: 111, parentId: 11, code: '111', fullName: '节点111', enabled: true, sortCode: 111 },
        { id: 1111, parentId: 111, code: '1111', fullName: '节点1111', enabled: true, sortCode: 1111 },
        { id: 1112, parentId: 111, code: '1112', fullName: '节点1112', enabled: true, sortCode: 1112 },
      ],
      tree: [],
      // 表格
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,

    }
  },
  created() {
    this.tree = [this.formatTreeData(this.treedata)];
    this.list = [
      {id: 1, a: '001', b: new Date().valueOf(), c: 0},
      {id: 2, a: '002', b: new Date().valueOf(), c: 1},
      {id: 3, a: '003', b: new Date().valueOf(), c: 1},
      {id: 4, a: '004', b: new Date().valueOf(), c: 0},
    ]
  },
  methods: {
    // 排序规则form checkbox事件
    firRuleChange() {
      if (this.firRuleForm.ruleChecked) {
        this.firRuleList = this.ruleList;
      }
    },
    secRuleChange() {
      if (this.secRuleForm.ruleChecked) {
        this.secRuleList = this.ruleList;
      }
    },
    thrRuleChange() {
      if (this.thrRuleForm.ruleChecked) {
        this.thrRuleList = this.ruleList;
      }
    },
    fouRuleChange() {
      if (this.fouRuleForm.ruleChecked) {
        this.fouRuleList = this.ruleList;
      }
    },
    // 车辆优先队列点击事件
    addWinNum() {
      if (this.winNumList === '') {
        this.winNumList = this.winNumList + this.winNum;
      } else {
        this.winNumList = this.winNumList + '\r' + this.winNum;
      }
      this.winNum = '';
      this.$refs['winNum'].focus();
    },
    // 数据提交
    saveAll() {
      console.log('this.winNumList', this.winNumList);
    },
    // 列表格式化树数据
    formatTreeData(list) {
      // 格式化树结构所需格式
      list.forEach(a => {
        a.children = []
        return a
      })
      // 找到根节点 parentId=0 为根节点
      let rootData
      for(const i of list) {
        // 不要用return, return会导致函数后面的语句都不执行
        if(i.parentId === 0) {
          rootData = i;
          break;
        }
      }
      // 递归生成树
      this.addChildren(rootData, list)
      return rootData
    },
    // 添加子节点
    addChildren(node, list) {
      node.children = list.filter(a => a.parentId === node.id)
      if (node.children.length !== 0) {
        for (const i of node.children) {
          this.addChildren(i, list);
        }
      }
    },
    handleNodeClick(data) {
      console.log('node', data);
    }
  }
}
</script>